<template>
	<view class="records">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="total">
			<view class="value">￥{{totalIncome}}</view>
			<view class="label">收益总额</view>
		</view>

		<view>
			<u-tabs :list="tabs" :current="current" active-color="#ff8404" :is-scroll="false"
				@change="onChange"></u-tabs>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="info">
					<view class="tit">{{item.note}}</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="num increase" v-if="item.trade_fee_type===1">+{{item.amount}}元</view>
				<view class="num reduce" v-if="item.trade_fee_type===0">-{{item.amount}}元</view>
			</view>
			<view class="empty-data" v-if="list.length===0">暂无记录</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '收益明细',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		tabs: [{
				name: '全部'
			},
			{
				name: '收入'
			},
			{
				name: '支出'
			},
		],
		current: 0,
		totalIncome: '0.00',
		isMore: true,
		list: [],
		incomeType: 0,
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('type')) {
			console.log('传递参数', opt.type);
			state.incomeType = opt.type;
		}
		getMyIncome();
		getList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getMyIncome() {
		request.get('water.incomerecords/getMyIncome', {
			type: 'task_income'
		}).then(res => {
			console.log('我的收益', res);
		})
	}

	function getList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		let params = {
			type: state.incomeType, //收益类型：0推广收益，1代理收益，2广告收益，3任务收益
			current: state.current,
			skip: state.list.length
		};
		request.get("water.incomerecords/list", params).then(res => {
			state.isMore = res.data.is_more;
			if (res.data.data) {
				if (state.list <= 0) {
					state.list = res.data.data;
				} else {
					state.list = state.list.concat(res.data.data);
				}
			}
		})
	}

	function onChange(e) {
		console.log('切换', e);
		state.current = e.index;
		state.isMore = true;
		state.list = [];
		getList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		tabs,
		current,
		totalIncome,
		isMore,
		list,
		incomeType,
	} = toRefs(state);
</script>

<style lang="scss">
	.records {
		.total {
			display: flex;
			flex-direction: column;
			text-align: center;
			padding: 30rpx;
			margin: 0 0 20rpx 0;
			background: linear-gradient(to right, #ff9967, #ff8404);

			.value {
				font-size: 36rpx;
				color: #fff;
			}

			.label {
				color: #fff;
			}

		}

		.list {
			.item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background: #fff;
				border-bottom: #f7f7fb solid 1rpx;

				.info {
					flex: 1;

					.tit {
						font-size: 29rpx;
						color: #222a52;
					}

					.time {
						font-size: 24rpx;
						color: #7c859c;
					}
				}

				.num {
					width: 180rpx;
					text-align: right;
					font-weight: 600;
				}

				.increase {
					color: #ff8404;
				}

				.reduce {
					color: red;
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>